<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset='utf-8'" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>商家客服页面</title>

        <style>

            #content{width:600px;height:200px;}
            .userUl{
                list-style: none;
            }
            .userUl li{
                width: 200px;
                height: 50px;
                background-color: #9acfea;
                text-align: center;

            }
            .userUl li:hover{
                background-color: yellow;
            }
            /*.userUl div{*/
            /*    width: 500px;*/
            /*    height: 500px;*/
            /*    background-color: #9acfea;*/
            /*    float: left;*/
            /*    margin-left: 200px;*/
            /*}*/


        </style>

    </head>




    <body id="body">

    <ul id="userListUl" class="userUl"></ul>







        <textarea id="content" rows="40" cols="500"></textarea>

        <div class="btn">
            <input type="button" value="清空" onclick="reset()">
            <input type="button" value="发送" onclick="send()">
        </div>
    </body>

</html>























<script type="text/javascript">




    var messageDiv = document.getElementById("messageDiv");
    let userUl = document.getElementById("userListUl");
    let userLiList = userUl.getElementsByTagName("li");
    let sender = "";
    var userList = new Array();


    //用来更新用户列表
    function updateUserList(userName) {
        for (let i = 0; i < userList.length; i++) {
            if (userName==userList[i]){
                return ;
            }
        }
        userList.push(userName);
        //向用户回话列表插入新用户
        userUl.innerHTML+="<li href='#'>"+userName+"</li>"

        userUl.innerHTML+="<div style='display: none' id=\'"+userName+"\'></div>"

         //document.getElementById("body").innerHTML+="<div style='display: none' id=\'"+userName+"\'></div>"
        //绑定id和点击事件
        updateUserListLi()
    }

    //更新页面中用户列表 li 中 的 ul
    function updateUserListLi() {

        //userLiList[userLiList.length-1].onclick = function () {
        //     console.log("1")
        //     //点击事件
        //     for (let j = 0; j < userLiList.length; j++) {
        //         //当自己被点击时
        //         if (userLiList[j]==this){
        //             //显示
        //             console.log(userLiList[j].innerText)
        //             // userLiList[j].getElementsByTagName("div").item(0).style.display = "block";
        //         }else {
        //             // userLiList[j].getElementsByTagName("div").item(0).style.display = "none";
        //         }
        //     }
        // }

        for (let i = 0; i < userList.length; i++) {
            userLiList[i].onclick = function (ev) {
                //点击事件
                for (let j = 0; j < userLiList.length; j++) {
                    //当自己被点击时
                    if (userLiList[j]==this){
                        //显示

                        sender = this.innerText;
                        console.log(sender)
                        document.getElementById(userLiList[j].innerText).style.display = "block";
                        this.style.backgroundColor = "yellow";
                        // userLiList[j].getElementsByTagName("div").item(0).style.display = "block";
                    }else {
                        document.getElementById(userLiList[j].innerText).style.display = "none";
                        userLiList[j].style.backgroundColor = "#9acfea";
                        // userLiList[j].getElementsByTagName("div").item(0).style.display = "none";
                    }
                }

            }
        }
    }














    var socket = new WebSocket("ws://localhost:8090/shop-api/WS/商家");

    //错误出现在nginx代理上

    // ws://localhost:80/shop-api/demo01
    // ws://localhost:8090/shop-api/demo01
    // ws://location/shop-api/demo01

    //创建Socket
    socket.onopen = function(event) {

        //接收数据事件
        socket.onmessage = function(event) {
            let data = JSON.parse(event.data)

            //更新用户列表
            updateUserList(data.sender)
            //插入小徐到对应消息区域
            document.getElementById(data.sender).innerHTML += "<p>"+data.message+"</p>";


            // messageDiv.innerHTML+="<br/>"+data.sender+"："+data.message;
        };

        // socket关闭事件
        socket.onclose = function(event) {
            messageDiv.innerHTML+="<br/>系统：已和服务器断开连接！！！";
        };

        socket.onerror = function (ev) {
            console.log("错误")
            console.log(ev.data)
        }


        //关闭socket
        //socket.close()
    };











    //-----------
    function send(){
        let msg=document.getElementById("content").value;//获取输入框内容
        console.log(sender)
        document.getElementById(sender).innerHTML += "<p>我:"+msg+"</p>";
        let qo = new QO("商家",sender,msg);
        let s = JSON.stringify(qo);
        socket.send(s);//发送消息
        reset();//清空输入框
        // messageDiv.innerHTML+="<br/>我："+msg;
    }

    function reset(){
        document.getElementById("content").value="";
    }

    function QO(sender,recipient, message) {
        this.shender = sender;
        this.recipient = recipient;
        this.message = message;
    }
    // let href = location.href;
    // let strings = href.split("/");
    // console.log(strings)
    // let path = "ws://"+strings[2]+"/shop-api/demo01"
    // console.log(path)



</script>

